<!--
  文件名: BookDetail.vue
  功能:
    1) 根据传入的书籍 ID 查找并展示书籍的详细信息。
    2) 提供返回首页的按钮功能，允许用户跳回首页。
  作用:
    用于显示书籍的详细信息，包括封面、作者、出版日期和简介等。
    如果未找到书籍，则显示错误提示。
-->
<template>
  <!-- 如果书籍数据存在，展示书籍详情 -->
  <div class="book-detail" v-if="book">
    <!-- 使用 Element UI 的卡片组件包裹书籍内容 -->
    <el-card>
      <div class="book-detail-content">
        <!-- 书籍封面 -->
        <img :src="book.cover" alt="book cover" class="book-detail-image" />
        <div class="book-detail-info">
          <!-- 书籍标题 -->
          <h2>{{ book.title }}</h2>
          <!-- 书籍作者 -->
          <p><strong>作者：</strong>{{ book.author }}</p>
          <!-- 书籍出版日期 -->
          <p><strong>出版日期：</strong>{{ book.publishDate }}</p>
          <!-- 书籍简介 -->
          <p><strong>简介：</strong>{{ book.description }}</p>
        </div>
      </div>
      <!-- 返回首页按钮 -->
      <div class="back-button">
        <el-button type="primary" @click="goHome">返回首页</el-button>
      </div>
    </el-card>
  </div>

  <!-- 如果书籍数据不存在，显示错误提示 -->
  <div v-else>
    <el-alert title="未找到书籍信息" type="error" />  <!-- 错误提示组件 -->
  </div>
</template>

<script>
/**
 * BookDetail.vue 脚本部分
 * 功能:
 *   1) 根据传入的书籍 ID 查找书籍数据并展示。
 *   2) 提供返回首页的按钮功能。
 */
import { ref, onMounted } from 'vue'  // 导入 Vue 库的 ref 和生命周期钩子
import { useRouter } from 'vue-router' // 导入 Vue Router 进行页面跳转
import { books } from '../data/books'  // 导入书籍数据

export default {
  name: 'BookDetail',
  props: ['id'], // 接收路由参数中的 id
  setup(props) {
    const book = ref(null) // 定义响应式变量，用于存储当前书籍数据
    const router = useRouter() // 获取 Vue Router 实例

    /**
     * 生命周期函数: onMounted
     * 功能: 组件挂载时根据传入的书籍 ID 查找书籍数据
     * 逻辑:
     *   1. 将传入的 ID 转为数字类型。
     *   2. 在书籍列表中查找匹配的书籍。
     *   3. 若未找到书籍，则设置 book 为 null。
     */
    onMounted(() => {
      const bookId = Number(props.id) // 将传入的 id 转换为数字类型
      if (!isNaN(bookId)) { // 检查 id 是否为有效数字
        // 根据 id 查找匹配的书籍，若未找到则返回 null
        book.value = books.find(b => b.id === bookId) || null
        console.log('Book Cover Path:', book.value?.cover) // 控制台打印封面路径，便于调试
      }
    })

    /**
     * 方法: 返回首页
     * 功能: 使用 Vue Router 跳转到首页路径
     * 副作用: 页面跳转
     */
    const goHome = () => {
      router.push('/') // 跳转到首页路径
    }

    // 将数据和方法返回供模板使用
    return {
      book,    // 当前书籍数据
      goHome   // 返回首页的方法
    }
  }
}
</script>

<style scoped>
/* 书籍内容整体布局 */
.book-detail-content {
  display: flex; /* 使用 Flex 布局 */
  flex-wrap: wrap; /* 允许内容换行 */
  align-items: flex-start; /* 垂直对齐到顶部 */
  justify-content: space-between; /* 让内容两端对齐 */
}

/* 书籍封面样式 */
.book-detail-image {
  width: 100%;           /* 设置宽度为100% */
  max-width: 450px;      /* 最大宽度为450px */
  height: auto;          /* 高度自适应 */
  object-fit: cover;     /* 图片保持比例填充并裁剪超出部分 */
  border: 1px solid #ddd; /* 添加边框 */
  border-radius: 4px;     /* 圆角效果 */
}

/* 书籍信息部分样式 */
.book-detail-info {
  flex: 1;               /* 占据剩余空间 */
  padding-left: 20px;    /* 左侧留白，增加间距 */
  margin-top: 0;         /* 调整顶部间距 */
}

/* 返回按钮样式 */
.back-button {
  margin-top: 20px;       /* 按钮与内容之间的间距 */
  text-align: center;     /* 按钮居中显示 */
}

/* 响应式布局 - 小屏幕 */
@media (max-width: 768px) {
  .book-detail-content {
    flex-direction: column; /* 小屏幕下调整为垂直排列 */
    align-items: center;    /* 中央对齐 */
  }

  .book-detail-image {
    max-width: 90%;         /* 在小屏幕下，封面图宽度占 90% */
    height: auto;           /* 高度自适应 */
  }

  .book-detail-info {
    margin-top: 20px;       /* 书籍信息部分在小屏幕下有适当的间距 */
    padding-left: 0;        /* 移除左侧间距 */
  }
}

/* 超小屏幕（如手机）调整 */
@media (max-width: 480px) {
  .book-detail-image {
    max-width: 100%;        /* 更小屏幕下，封面图占满整个宽度 */
    height: auto;           /* 高度自适应 */
  }

  .book-detail-info {
    font-size: 14px;        /* 更小屏幕下字体稍微变小 */
  }
}
</style>
